import React, { Component } from 'react';

class JSXBaseDemo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      name: '双越',
      imgUrl: 'https://img1.sycdn.imooc.com/5a9fc8070001a82402060220-160-160.jpg',
      flag: true
    }
  }

  render() {
    // 获取变量 插值
    const pElem = <p>{this.state.name}</p>

    // 表达式
    const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>

    // 子元素
    const imgElem = <div>
      <p>我的头像</p>
      <img src={this.state.imgUrl} alt="" />
    </div>

    // class
    const classElem = <p className="title">设置 css class</p>

    // style
    const styleData = { fontSize: '20px', color: 'blue' }
    const styleElem = <p style={styleData}>设置 style</p>
    /* 内联写法 */
    const styleElem2 = <p style={{ fontSize: '20px', color: 'blue' }}>设置 style(内联)</p>

    // 原生 html
    const rawHtml = '<span>富文本内容<i>斜体</i><b>加粗</b></span>'
    const rawHtmlData = {
      __html: rawHtml
    }
    const rawHtmlElem = <div>
      <p dangerouslySetInnerHTML={rawHtmlData}></p>
      <p>{rawHtml}</p>
    </div>

    // 加载组件
    /*
    const componentElem = <div>
      <p>JSX 中加载一个组件</p>
      <hr />
      <List />
    </div>
    */

    return (
      <div>
        <h4>1. 获取变量 插值</h4>
        {pElem}
        <h4>2. 表达式</h4>
        {exprElem}
        <h4>3. 子元素</h4>
        {imgElem}
        <h4>4. class</h4>
        {classElem}
        <h4>5. style</h4>
        {styleElem}
        {styleElem2}
        <h4>6. 原生 html</h4>
        {rawHtmlElem}
      </div>
    );
  }
}

export default JSXBaseDemo;